<template>
    <div class="test-settings-wrapper">
        <!-- 左侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-content">
                <div class="menu-item active">
                    <SettingOutlined />
                    <span>Test Settings</span>
                </div>
                <div class="menu-item">
                    <span>System Settings</span>
                </div>
                <div class="menu-item">
                    <span>DAQ channels</span>
                </div>
                <div class="menu-item">
                    <span>Sensor database</span>
                </div>
                <div class="menu-item">
                    <span>Data Calculation</span>
                </div>
            </div>
        </aside>

        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1>Test Settings</h1>
            </div>

            <!-- 内容面板 -->
            <div class="content-panels">
                <!-- 左侧面板：Delay for Operation Type -->
                <div class="panel left-panel">
                    <div class="panel-header">
                        <h2>Delay for Operation Type</h2>
                    </div>
                    <div class="panel-content">
                        <!-- 下拉选择 -->
                        <div class="dropdown-section">
                            <div class="select-with-icon">
                                <ToolOutlined class="select-icon" />
                                <ASelect v-model:value="selectedOperationType" style="width: 200px"
                                    class="operation-select">
                                    <ASelectOption value="O-t1-C-t2-O">O-t1-C-t2-O</ASelectOption>
                                    <ASelectOption value="C-t1-O-t2-C">C-t1-O-t2-C</ASelectOption>
                                    <ASelectOption value="O-t1-O-t2-C">O-t1-O-t2-C</ASelectOption>
                                </ASelect>
                            </div>
                        </div>
                    </div>
                    <div class="left-charter">

                    </div>
                </div>

                <!-- 右侧面板：Speed Definition -->
                <div class="panel right-panel">
                    <div class="panel-header">
                        <h2>Speed Definition</h2>
                    </div>
                    <div class="panel-content">
                        <a-row>
                            <a-col :span="6">
                                <div class="graph-section">
                                    <div class="speed-graph">
                                        <canvas ref="speedGraph1" class="graph-canvas"></canvas>
                                        <div class="graph-points">
                                            <div class="point point-1"></div>
                                            <div class="point point-2"></div>
                                        </div>
                                        <div class="graph-lines">
                                            <div class="line line-1"></div>
                                            <div class="line line-2"></div>
                                        </div>
                                    </div>
                                </div>
                            </a-col>
                            <a-col :span="18"> <!-- 第一个Speed Definition区域 -->
                                <div class="speed-definition">

                                    <div class="definition-content">
                                        <div class="dropdown-section">
                                            <div>
                                                <ACheckbox v-model:checked="referenceMethod1"
                                                    class="reference-checkbox">
                                                    Reference method
                                                </ACheckbox>
                                            </div>
                                            <div style="margin-top: 6px;">
                                                <ASelect v-model:value="speedMethod1" style="width: 300px">
                                                    <ASelectOption value="just-closing-contact-make">just
                                                        closing->contact make
                                                    </ASelectOption>
                                                    <ASelectOption value="just-opening-contact-break">just
                                                        opening->contact
                                                        break
                                                    </ASelectOption>
                                                </ASelect>
                                            </div>
                                        </div>
                                        <div class="speed-controls">
                                            <div class="control-column">
                                                <div class="column-header">Type</div>
                                                <div class="control-buttons">

                                                    <AInput v-model:value="closingSpeed1" placeholder="Closing Speed">
                                                        <template #prefix>
                                                            <AppstoreOutlined />
                                                        </template>
                                                    </AInput>
                                                    <AInput v-model:value="closingSpeed1" placeholder="Opening Speed">
                                                        <template #prefix>
                                                            <AppstoreOutlined />
                                                        </template>
                                                    </AInput>
                                                </div>
                                            </div>
                                            <div class="control-column">
                                                <div class="column-header">Value</div>
                                                <div class="value-inputs">
                                                    <div class="input-group">
                                                        <AInput v-model:value="closingSpeed1"
                                                            :disabled="!referenceMethod1" />
                                                        <span class="separator">-</span>
                                                        <AInput v-model:value="openingSpeed1"
                                                            :disabled="!referenceMethod1" />
                                                    </div>
                                                    <div class="input-group" style="margin-top: 8px;">
                                                        <AInput v-model:value="closingSpeed1"
                                                            :disabled="!referenceMethod1" />
                                                        <span class="separator">-</span>
                                                        <AInput v-model:value="openingSpeed1"
                                                            :disabled="!referenceMethod1" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 第二个Speed Definition区域 -->
                                <div class="speed-definition inactive">
                                    <div class="definition-content">
                                        <div class="dropdown-section">
                                            <div>
                                                <ACheckbox v-model:checked="referenceMethod1"
                                                    class="reference-checkbox">
                                                    Reference method
                                                </ACheckbox>
                                            </div>
                                            <div style="margin-top: 6px;">
                                                <ASelect v-model:value="speedMethod2" style="width: 300px">
                                                    <ASelectOption value="just-closing-contact-make">just
                                                        closing->contact make
                                                    </ASelectOption>
                                                    <ASelectOption value="just-opening-contact-break">just
                                                        opening->contact
                                                        break
                                                    </ASelectOption>
                                                </ASelect>
                                            </div>
                                        </div>
                                        <div class="speed-controls">
                                            <div class="control-column">
                                                <div class="column-header">Type</div>
                                                <div class="control-buttons">
                                                    <AInput v-model:value="closingSpeed1" placeholder="Closing Speed">
                                                        <template #prefix>
                                                            <AppstoreOutlined />
                                                        </template>
                                                    </AInput>
                                                    <AInput v-model:value="closingSpeed1" placeholder="Opening Speed">
                                                        <template #prefix>
                                                            <AppstoreOutlined />
                                                        </template>
                                                    </AInput>
                                                </div>
                                            </div>
                                            <div class="control-column">
                                                <div class="column-header">Value</div>
                                                <div class="value-inputs">
                                                    <div class="input-group">
                                                        <AInput v-model:value="closingSpeed2"
                                                            :disabled="!referenceMethod2" />
                                                        <span class="separator">-</span>
                                                        <AInput v-model:value="openingSpeed2"
                                                            :disabled="!referenceMethod2" />
                                                    </div>
                                                    <div class="input-group" style="margin-top: 8px;">
                                                        <AInput v-model:value="closingSpeed2"
                                                            :disabled="!referenceMethod2" />
                                                        <span class="separator">-</span>
                                                        <AInput v-model:value="openingSpeed2"
                                                            :disabled="!referenceMethod2" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a-col>
                        </a-row>


                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import {
    LeftOutlined,
    SettingOutlined,
    AppstoreOutlined,
    ToolOutlined
} from '@ant-design/icons-vue';
import { Row as ARow, Col as ACol } from 'ant-design-vue';

import './index.scss';

// 定义组件属性
defineOptions({
    name: 'SetPage',
    path: '/set',
    async: true
});

// 响应式数据
const selectedOperationType = ref('O-t1-C-t2-O');
const referenceMethod1 = ref(true);
const referenceMethod2 = ref(false);
const speedMethod1 = ref('just-closing-contact-make');
const speedMethod2 = ref('just-closing-contact-make');
const activeSpeedType1 = ref('closing');
const activeSpeedType2 = ref('closing');
const closingSpeed1 = ref('');
const openingSpeed1 = ref('');
const closingSpeed2 = ref('');
const openingSpeed2 = ref('');

const speedGraph1 = ref();
const speedGraph2 = ref();

// 方法
const setActiveSpeedType1 = (type) => {
    activeSpeedType1.value = type;
};

const setActiveSpeedType2 = (type) => {
    activeSpeedType2.value = type;
};

// 绘制速度图表
const drawSpeedGraph = (canvas, isActive = true) => {
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;

    // 清空画布
    ctx.clearRect(0, 0, width, height);

    if (!isActive) return;

    // 设置样式
    ctx.strokeStyle = '#722ed1';
    ctx.lineWidth = 2;
    ctx.fillStyle = '#722ed1';

    // 绘制S形曲线
    ctx.beginPath();
    ctx.moveTo(20, height - 40);

    // 控制点
    const cp1x = width * 0.3;
    const cp1y = height * 0.8;
    const cp2x = width * 0.7;
    const cp2y = height * 0.2;

    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, width - 20, 40);
    ctx.stroke();

    // 绘制水平线
    ctx.strokeStyle = '#20c997';
    ctx.lineWidth = 1;

    // 上线
    ctx.beginPath();
    ctx.moveTo(20, height * 0.3);
    ctx.lineTo(width - 20, height * 0.3);
    ctx.stroke();

    // 下线
    ctx.beginPath();
    ctx.moveTo(20, height * 0.7);
    ctx.lineTo(width - 20, height * 0.7);
    ctx.stroke();

    // 绘制点
    ctx.fillStyle = '#722ed1';
    ctx.beginPath();
    ctx.arc(width * 0.4, height * 0.3, 8, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(width * 0.6, height * 0.7, 8, 0, 2 * Math.PI);
    ctx.fill();

    // 绘制数字
    ctx.fillStyle = '#fff';
    ctx.font = '12px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('1', width * 0.4, height * 0.3);
    ctx.fillText('2', width * 0.6, height * 0.7);
};

// 生命周期
onMounted(() => {
    nextTick(() => {
        if (speedGraph1.value) {
            speedGraph1.value.width = 200;
            speedGraph1.value.height = 120;
            drawSpeedGraph(speedGraph1.value, true);
        }

        if (speedGraph2.value) {
            speedGraph2.value.width = 200;
            speedGraph2.value.height = 120;
            drawSpeedGraph(speedGraph2.value, false);
        }
    });
});
</script>
